<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表首页</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
用户名: <input type="text" id="likeName" size="5px">
密码: <input type="text" id="likePassword" size="5px">
<button id="selectLike">模糊查询</button><br/><br/>
<button id="insertUser">新增用户</button>
<button id="checkAll">全选</button>
<button id="checkFan">反选</button>
<button id="deletPiLiang">批量删除</button>
<table border="1">
    <caption>用户信息列表</caption>
    <tr id="myTr" align="center">
        <td>勾选</td>
        <td>主键</td>
        <td>用户名</td>
        <td>密码</td>
        <td>年龄</td>
        <td>更新</td>
        <td>删除</td>
    </tr>
</table>
总计<span id="count"></span>条&nbsp;&nbsp;&nbsp;&nbsp;
每页<span id="showCount"></span>条&nbsp;&nbsp;&nbsp;&nbsp;
总计<span id="allPage"></span>页&nbsp;&nbsp;&nbsp;&nbsp;
第<span id="page"></span>页
<div id="pageList"></div>
</body>
<script>
    /**
     * 删除按钮，点击可删除此条用户信息
     * @param id
     */
    function del(id){
        let action = confirm("你确定要删除这条数据吗？");
        if (action){
            $.ajax({                    // 标准化模板，不用死记  // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                url:"/deleteByIdServlet",   // 请求路径
                type:"post",            // 请求的方式，不区分大小写
                async:true,             // 是否异步，true是默认值，false为同步请求
                cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                datatype:"json",        // 返回类型，text文本、html页面、json数据
                data:{// 传递给后台参数名和参数值
                    id:id
                },
                success:function(response){                   // 如果后端响应成功，则会返回所有数据给到response对象中
                    console.log(response);
                    alert(response.msg);
                    if(response.code === 200) {
                        window.location.href="index.html";    // 在这里起到了刷新的作用
                    }
                },
                error:function(response){                      // 如果请求失败，则会执行error函数
                    alert("出错" + response);
                }
            });
        }
    }
    /**
     * 将所有用户信息按指定页数和每页展示用户条数分页
     */
    function selectPage(page){
        $.ajax({                    // 标准化模板，不用死记  // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
            url:"/page",   // 请求路径
            type:"get",            // 请求的方式，不区分大小写
            async:true,             // 是否异步，true是默认值，false为同步请求
            cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
            datatype:"json",        // 返回类型，text文本、html页面、json数据
            data:{                  // 传递给后台参数名和参数值
                page:page,
                showCount:5
            },
            success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                console.log(response);
                if(response.code === 200) {
                    $("table").empty();
                    $("table").append("<caption>用户信息列表</caption>\n" +
                        "    <tr id=\"myTr\" align='center'>\n" +
                        "        <td>勾选</td>\n" +
                        "        <td>主键</td>\n" +
                        "        <td>用户名</td>\n" +
                        "        <td>密码</td>\n" +
                        "        <td>年龄</td>\n" +
                        "        <td>更新</td>\n" +
                        "        <td>删除</td>\n" +
                        "    </tr>");
                    let jsonArray = response.list;
                    console.log(jsonArray);
                    if(jsonArray.length === 0) {
                        $("table").append("<tr>" +
                            "            <td colspan='4'>暂时数据内容</td>" +
                            "        </tr>");
                    }
                    else {
                        $("#count").text(response.count);                 // 总计数据库中有多少条记录
                        $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                        $("#allPage").text(response.allPage);             // 总计有多少页
                        $("#page").text(response.page);                   // 当前显示的是第几页
                        $("#pageList").empty();
                        for(i = 0; i < response.allPage; i++) {
                            $("#pageList").append("<button onclick='selectPage("+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }
                    }
                    for (i = 0 ;i<jsonArray.length;i++){
                        $("table").append("<tr align='center'>" +
                            "        <td><input type='checkbox' name='ck' id='"+ jsonArray[i].id +"'></td>" +
                            "        <td>"+jsonArray[i].id+"</td>" +
                            "        <td>"+jsonArray[i].username+"</td>" +
                            "        <td>"+jsonArray[i].password+"</td>" +
                            "        <td>"+jsonArray[i].age+"</td>" +
                            "        <td><a href='userEdit.html?id="+jsonArray[i].id+"'>更新</a></td>" +
                            "        <td><button onclick='del("+ jsonArray[i].id +")'>删除</button></td>" +
                            "    </tr> ")
                    }
                }
                else {
                    alert(response.msg);
                }
            },
            error:function(response){          // 如果请求失败，则会执行error函数
                alert("出错" + response);
            }
        });
    }
    /**
     * 将模糊查询到的用户信息按指定页数和每页展示用户条数分页
     */
    function selectLikePage(page){
        let username = $("#likeName").val();
        let password = $("#likePassword").val();
        if (username === "" && password === ""){
            window.location.href="index.html";
            alert("请输入要查询用户名和密码！")
        }
        else {
            $.ajax({                    // 标准化模板，不用死记 jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                url: "/selectLikeServlet",           // 请求路径
                type: "get",            // 请求的方式，不区分大小写
                async: true,             // 是否异步，true是默认值，false为同步请求
                cache: false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                datatype: "html",        // 返回类型，text文本、html页面、json数据
                data: {                  // 传递给后台参数名和参数值
                    username: username,  // key和value是可以相同名称，但是它们的意义是不一样，值的名称是代表变量的值
                    password: password,
                    page:page,
                    showCount:5
                },
                success:function(response){        // 如果后端响应成功，则会返回所有数据给到response对象中
                    console.log(response);
                    if(response.code === 200) {
                        $("table").empty();
                        $("table").append("<caption>用户信息列表</caption>\n" +
                            "    <tr id=\"myTr\" align='center'>\n" +
                            "        <td>勾选</td>\n" +
                            "        <td>主键</td>\n" +
                            "        <td>用户名</td>\n" +
                            "        <td>密码</td>\n" +
                            "        <td>年龄</td>\n" +
                            "        <td>更新</td>\n" +
                            "        <td>删除</td>\n" +
                            "    </tr>");
                        let jsonArray = response.list;
                        console.log(jsonArray);
                        if(jsonArray.length === 0) {
                            $("table").append("<tr>" +
                                "            <td colspan='4'>暂时数据内容</td>" +
                                "        </tr>");
                        }
                        else {
                            $("#count").text(response.count);                 // 总计数据库中有多少条记录
                            $("#showCount").text(response.showCount);         // 当前页面总计显示多少条
                            $("#allPage").text(response.allPage);             // 总计有多少页
                            $("#page").text(response.page);                   // 当前显示的是第几页
                            $("#pageList").empty();
                            for(i = 0; i < response.allPage; i++) {
                                $("#pageList").append("<button onclick='selectLikePage("+(i + 1)+")'>第" + (i + 1) + "页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                            }
                        }
                        for (i = 0 ;i<jsonArray.length;i++){
                            $("table").append("<tr align='center'>" +
                                "        <td><input type='checkbox' name='ck' id='"+ jsonArray[i].id +"'></td>" +
                                "        <td>"+jsonArray[i].id+"</td>" +
                                "        <td>"+jsonArray[i].username+"</td>" +
                                "        <td>"+jsonArray[i].password+"</td>" +
                                "        <td>"+jsonArray[i].age+"</td>" +
                                "        <td><a href='userEdit.html?id="+jsonArray[i].id+"'>更新</a></td>" +
                                "        <td><button onclick='del("+ jsonArray[i].id +")'>删除</button></td>" +
                                "    </tr> ")
                        }
                    }
                    else {
                        alert(response.msg);
                    }
                },
                error: function () {          // 如果请求失败，则会执行error函数
                }
            });
        }
    }

    $(function (){
        // 这里调用查询分页方法，此方法传递1，代表默认用户进入首页时，查询第一页的数据
        selectPage(1);

        /**
         * 点击新增用户按钮，跳转页面
         */
        $("#insertUser").click(function (){
            window.location.href="userCreate.html";
        });

        /**
         * 全选按钮
         */
        $("#checkAll").click(function (){
            let elementsArray = document.getElementsByName("ck");
            for(i = 0; i < elementsArray.length; i++) {
                elementsArray[i].checked = true;
            }
        });

        /**
         * 反选按钮
         */
        $("#checkFan").click(function (){
            let elementsArray = document.getElementsByName("ck");
            for(i = 0; i < elementsArray.length; i++) {
                if(elementsArray[i].checked) {
                    elementsArray[i].checked = false;                 //当多选框被选中为true时则赋值为false取消选中
                }
                else {
                    elementsArray[i].checked = true;                  //当多选框没被选中为false时则赋值为true使被选中
                }
            }
        });

        /**
         * 批量删除
         */
        $("#deletPiLiang").click(function (){
            let action = confirm("确定要批量删除用户信息吗？")
            let array = [];                 //定义一个数组来存放被选中多选框的id
            let len = 0;                    //定义数组的下标
            let elementsArray = document.getElementsByName("ck");     //通过多选框的name="ck"捕获所有多选框的属性，封装成独立的一个数组元素
            console.log(document.getElementsByName("ck"));
            if (action){
                for(i = 0; i < elementsArray.length; i++) {
                    if (elementsArray[i].checked){                        //分别判断每个多选框是否被选中，被选中为true
                        array[len] = elementsArray[i].valueOf().id;       //获取被选中多选框的id值并赋值给数组
                        len++;                                            //数组下标自增
                    }
                }
                console.log(array);
                for (i = 0;i < array.length;i++){
                    let id = array[i];
                    $.ajax({                    // 标准化模板，不用死记  // jquery中的任何属性名称，不能错误，并且一定区分大小写，所以建议在开发中，尽可能使用ctrl+c复制在修改
                        url:"/deleteByIdServlet",   // 请求路径
                        type:"post",            // 请求的方式，不区分大小写
                        async:true,             // 是否异步，true是默认值，false为同步请求
                        cache:false,            // 关闭缓存，目的是为了避免部分浏览器缓存加载出错(IE)
                        datatype:"json",        // 返回类型，text文本、html页面、json数据
                        data:{                  // 传递给后台参数名和参数值
                            id:id
                        },
                        success:function(response){                   // 如果后端响应成功，则会返回所有数据给到response对象中
                            console.log(response);
                            if(response.code === 200) {
                                window.location.href="index.html";    // 在这里起到了刷新的作用
                            }
                        },
                        error:function(response){                      // 如果请求失败，则会执行error函数
                            alert("出错" + response);
                        }
                    });
                }
            }
        });

        /**
         * 模糊查询
         */
        $("#selectLike").click(function (){
            selectLikePage(1);                      // 这里调用查询分页方法，此方法传递1，代表默认用户进入首页时，查询第一页的数据
        });
    });
</script>
</html>